<template>
	<div class="login" clearfix>
		<div class="login-wrap" style="text-align: center;">
			<el-row type="flex" justify="center">
				<el-form

            ref="loginForm"
            :model="user"
            :rules="rules"
            status-icon label-width="80px">
					<h1>蜗牛TMS后台管理系统</h1>
					<h3>登录</h3>
					<hr>
					<el-form-item prop="account" label="账号">
						<el-input v-model="user.account" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
					</el-form-item>
					<el-form-item id="password" prop="password" label="密 码">
						<el-input
                @keyup.enter.native="doLogin"
                v-model="user.password"
                show-password
                placeholder="请输入密码"
                prefix-icon="el-icon-lock">
            </el-input>
					</el-form-item>
					 <router-link to="/" style="margin-left: 180px"> 找回密码 </router-link>
					<router-link to="/register"  style="margin-left: 10px"> 注册账号</router-link>
					<el-form-item>
						<el-button type="primary" icon="el-icon-upload" @click="doLogin()" >登 录</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				user: {
					account: "",
					password: ""
				},
        rules:null

			};
		},
		created() {
		  if(localStorage.getItem("token")){
		    this.$router.push("/main");
      }
    },
		methods: {
			doLogin() {
				if (!this.user.account) {
					this.$message.error("请输入账号！");
					return;
				} else if (!this.user.password) {
					this.$message.error("请输入密码！");
					return;
				} else {
				  localStorage.removeItem("token");
          this.axios.post("http://localhost:8080/users/login",{
            account: this.user.account,
            password: this.user.password
          }).then( (res) =>{
            console.log(res.data);
            if (res.data.code!="200"){
              this.$message.error(res.data.msg);
            }else {
			  localStorage.setItem("name",this.user.account);
              localStorage.setItem("token",res.data.data);
              this.$router.push("/main");
            }
          })

					//校验用户名和密码是否正确;
					// this.$router.push({ path: "/personal" });
					/* axios
					   .post("/login/", {
					     name: this.user.account,
					     password: this.user.password
					   })
					   .then(res => {
					     // console.log("输出response.data.status", res.data.status);
					     if (res.data.status === 200) {
					       this.$router.push({ path: "/personal" });
					     } else {
					       alert("您输入的用户名或密码错误！");
					     }
					   }); */
					//
				}
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: url("../assets/login_bg.jpg") no-repeat;

		background-size: cover;
		
		overflow: hidden;
	}

	.login-wrap {
		background: url("../assets/login_bg2.jpg") no-repeat;
		background-size: cover;
		width: 450px;
		height: 400px;
		margin: 155px auto;
		overflow: hidden;
		padding-top: 10px;
		line-height: 40px;
	}

	#password {
		margin-bottom: 5px;
	}

	h3 {
		color: #0babeab8;
		font-size: 24px;
		
	}

	hr {
		background-color: #444;
		margin: 20px auto;
	}

	a {
		text-decoration: none;
		color: #aaa;
		font-size: 15px;
	}

	a:hover {
		color: coral;
	}

	.el-button {
		width: 80%;
		margin-left: -50px;
	}


	
</style>
